<template>
    <div>
        <!-- 1、顶部通栏 -->
        <AppTopNav />
        <!-- 2、头部区域 -->
        <MyHeader />
    </div>
    <!-- 分类盒子 -->
    <div class="class">
        <div class="w">
            <!-- 导航 -->
            <p class="Navigation">
                <a href="#">首页</a> > <span>美食</span>
            </p>
            <!-- 盒子 -->
            <div class="item">
                <!-- 分类 -->
                <div class="fenlei">
                    <span class="text">分类：</span>
                    <div class="all">
                        <a href="#" class="alltext" v-for="(item, index) in 20" :key="index">全部</a>
                    </div>
                </div>
                <!-- 配送地区 -->
                <div class="fenlei">
                    <span class="text">配送地区：</span>
                    <div class="all">
                        <a href="#" class="alltext" v-for="(item, index) in 3" :key="index">全部</a>
                    </div>
                </div>
                <!-- 排序 -->
                <div class="fenlei">
                    <span class="text">排序：</span>
                    <div class="all">
                        <a href="#" class="alltext active">默认</a>
                        <a href="#" class="alltext">
                            <span>价格</span>
                            <i></i>
                        </a>
                        <a href="#" class="alltext">
                            <span>上架时间</span>
                             <i>
                             </i>
                        </a>
                    </div>
                </div>
                <Item v-for="(item, index) in 2" :key="index"></Item>
            </div>
        </div>
    </div>

</template>

<script setup>
import Item from '@/views/Class/item'
import AppTopNav from "@/components/AppTopNav.vue";
import MyHeader from '@/components/MyHeader.vue'
import { ref } from "vue";

components: {
    AppTopNav,
        MyHeader,
        Item
}

</script>

<style lang="less" scoped>
.class {
    background-color: rgba(241, 241, 241, 0.814);
    padding-top: 15px;
    padding-bottom: 30px;

    .Navigation {

        padding-bottom: 15px;
        font-size: 10px;

        span {
            color: #ccc;
        }

    }

    .item {
        // height: 500px;
        padding: 25px 40px;
        background-color: #fff;

        .fenlei {
            display: flex;
            border-bottom: 1px dashed #dedede;
            margin: 10px 0;

            .text {
                display: block;
                height: 26px;
                font-size: 14px;
                color: #999;
                margin-right: 20px;
            }

            .active {
                color: #c1a280;
            }

            .all {
                display: flex;
                flex-wrap: wrap;
                width: 930px;

                .alltext {
                    float: left;
                    margin-right: 25px;
                    margin-bottom: 16px;
                    font-size: 14px;
                }
            }
        }
    }
}
</style>